<template>
  <div class="content ">
    <div class="search bg_style border_style">
      <YsInput class="search-input border_style" @on-focus="clickBlur(true)" @on-blur="clickBlur(false)" clearable
        @on-enter="selectAppMenu" v-model="pege_param.service_name" placeholder="请输入编码或名称">
        <!-- <YsIcon type="icon iconfont icon-sousuo" :style="{color: inputFocus?'rgba(64,86,128,1)':'rgba(64,86,128,0.6)'}" slot="prefix" /> -->
      </YsInput>
      <Select style="width:222px;margin-right:10px; " class="select-border" v-model="pege_param.id">
        <Option v-for="(item, index) in selectlist" :value="item.id" :key="index" :label="item.name"
          @click.native="selectAppMenu">{{ item.name }}</Option>
      </Select>

      <YsButton class="searchBtn" @click="selectAppMenu" type="primary">查询</YsButton>
      <div class="right">
        <YsButton @click="subscribe" v-if="btn_power.length>0&&btn_power[0].priv_flag==1">订阅</YsButton>
        <YsButton @click="showAppItemDialog(1)" v-if="btn_power.length>0&&btn_power[1].priv_flag==1" type="primary"
          class="right-between">新建</YsButton>
      </div>

    </div>
    <YsSpin fix v-show="isSpinShow">
      <YsIcon type="load-c" size="30" class="demo-spin-icon-load"></YsIcon>
      <div>Loading...</div>
    </YsSpin>
    <div class="service bg_style border_style">
      <div class="service-inner">
        <template v-if="arrCard.length>0">
          <YsCard class="service-item car_style border_style" v-for="(card,index) in arrCard"
            @click.native.stop="stopClick(card,true)" :key="index">
            <div class="cardState" :class="[card.state==1 ? 'upper' : 'unUpper',card.state ==3? 'wait' : '']">
              {{card.state_name}}</div>
            <YsIcon type="md-more" size="20" class="setting text_01" @click.stop="showPopTipItem(card,true)" />
            <div class="img-top border_style">
              <!-- <div v-if="card.visible" class="toolTip" @click.stop="showPopTipItem(card,false)"> -->
              <div v-if="card.visible" class="toolTip">
                <div v-if="card.state_name != '未上架'">
                  <YsButton type="primary" @click.stop="uploadDownApp(card.id,2)">下架</YsButton>
                </div>
                <div v-else>
                  <YsButton type="primary" @click.stop="showAppItemDialog(0,card)">编辑</YsButton>
                  <YsButton type="primary" @click.stop="delAppItem(card.id)" class="toolTipItem">删除</YsButton>
                  <YsButton type="primary" @click.stop="uploadDownApp(card.id,1)">上架</YsButton>
                </div>
              </div>
              <img class="service-img" @click="goAppUsage(card)" :src="card.app_logo?imgurl(card.app_logo):''"
                :onerror="onErrorImg()">
            </div>
            <ul class="service-list">
              <li>
                <label class="text_01">应用编码</label>
                <span class="text-overflow text_01">{{card.app_code}}</span>
              </li>
              <li>
                <label class="text_01">应用名称</label>
                <span class="text-overflow text_01" :title="card.app_name">{{card.app_name}}</span>
              </li>
              <li>
                <label class="text_01">创建时间</label>
                <span class="text-overflow text_01" :title="card.update_time">{{card.update_time}}</span>
              </li>
              <li>
                <label class="text_01">创建人员</label>
                <span class="text-overflow text_01">{{card.crt_user_name}}</span>
              </li>
            </ul>
          </YsCard>
        </template>
        <div v-else class="default-box">
          <img class="default-img" src="../../assets/images/default2.png" alt="">
          <p> 暂无数据</p>
        </div>
      </div>
      <div class="page" v-if="arrCard.length>0">
        <div class="records text_01">
          共{{ page.total }}条
        </div>
        <YsPage @on-change="pageChange" :page-size="page.pageSize" :current="page.current" :total="page.total"
          class="pagePallion"></YsPage>
      </div>
    </div>

    <!-- 应用弹窗 -->

    <pro-dialog class="add-serve" ref="addAppDom" width="820" :nopadding="true" :title="setappflag?'新建应用':'编辑应用'">
      <div class="model-box">
        <YsForm ref="formAppValidate" :model="appInfo" label-position="top" :rules="app_rule">
          <YsRow :gutter="16">
            <YsCol span="12">
              <YsRow>
                <YsFormItem label="应用名称" prop="app_name">
                  <YsInput size="large" :maxlength="100" v-model="appInfo.app_name" placeholder="请输入应用名称"></YsInput>
                </YsFormItem>
              </YsRow>
              <YsRow>
                <YsCol span="21" style="padding-right:0">
                  <YsFormItem label="检测模型" prop="check_model_name">
                    <YsInput size="large" class="icon-input" :maxlength="100" :disabled="true"
                      v-model="appInfo.check_model_name"></YsInput>
                  </YsFormItem>
                </YsCol>
                <YsCol span="3">
                  <div class="icon-chain">
                    <span class="icon iconfont" @click="getmodalBox">&#xe70e;</span>
                  </div>
                </YsCol>
              </YsRow>
              <YsRow>
                <YsFormItem label="应用描述">
                  <YsInput v-model="appInfo.app_intro" maxlength="200" class="textNtro" type="textarea"
                    placeholder="请输入描述文字"></YsInput>
                </YsFormItem>
              </YsRow>
            </YsCol>
            <YsCol span="12">
              <YsRow>
                <YsFormItem class="label_before" label="应用图标">
                  <div class="iconsouter border_style">
                    <YsUpload :action="fileupload.uploadpath" ref="upload" :format="['jpg','jpeg','png']"
                      :on-exceeded-size="handleMaxSize" :on-success="handleSuccess" :before-upload="uploadProcessThen"
                      :on-format-error="handleFormatError">
                      <div class="iconsinner">
                        <YsIcon type="icon iconfont icon-shangchuan" size="52"></YsIcon>
                        <p>点击上传</p>
                      </div>
                    </YsUpload>
                  </div>
                </YsFormItem>
              </YsRow>
            </YsCol>
          </YsRow>
        </YsForm>
        <YsRow class="foot-btn">
          <YsButton size="large" @click="handleAppReset()">取消</YsButton>
          <YsButton size="large" @click="addAlgorithmApp('formAppValidate')" type="primary">提交</YsButton>
        </YsRow>
      </div>
    </pro-dialog>

    <!-- 选择模型弹出 -->
    <pro-dialog class="modal-box" ref="modalDom" width="auto" :nopadding="true" title="选择检测模型">
      <div style="padding: 0 24px ;position: relative;">
        <div class="search border_style" style="padding: 0  16px">
          <YsInput class="search-input" style="width:200px;margin-right:10px" @on-enter="getPageAppModels"
            v-model="modalInfo.model_name" placeholder="请输入模型名称">
            <YsIcon type="icon iconfont icon-sousuo" style="color:rgba(64,86,128,.6)" slot="prefix" />
          </YsInput>
          <!-- <Select style="width:200px;" v-model="modalInfo.id">
            <Option v-for="(item, index) in selectlist" :value="item.id" :key="index" :label="item.name" @click.native="getPageAppModels">{{ item.name }}</Option>
          </Select> -->
        </div>
      </div>
      <div class="contantmodal border_style">
        <YsSpin fix v-if="modalInfo.loading_show">
          <YsIcon type="ios-loading" size=18 class="demo-spin-icon-load"></YsIcon>
          <div>加载中...</div>
        </YsSpin>
        <YsRow class="contant-scrollb" :gutter="16">
          <YsCol span="6" v-for="(item,index) in modelList" :key="index">
            <div class="modal-item border_style">
              <div class="mi-header ">
                <span class="car_title">{{item.model_name}}</span>
                <div class="mih-radio" @click="setModalRadio(item)" :class="{'mih-radio-active':item.checked}"></div>
              </div>
              <div class="mi-center ">
                <div class="mic-left">
                  <YsCircle :percent="100" :size=circleWidth stroke-color="#00B78D">
                    <p class="demo-Circle-top">{{item.maturity_level}}%</p>
                    <p class="demo-Circle-bottom">平均成熟度</p>
                  </YsCircle>
                </div>
                <div class="mic-right">
                  <ul class="micr-list">
                    <li>
                      <label style="margin-top:32px" class="text_01">模型总数</label>
                      <div class="micr-text text-overflow text_01">{{item.normNum}}</div>
                    </li>
                    <li>
                      <label style="margin-top:18px" class="text_01">图片数量</label>
                      <div class="micr-text text-overflow text_01">{{item.image_count}}</div>
                    </li>
                  </ul>
                </div>
              </div>
              <ul class="mi-footer border_style">
                <li>
                  <label class="text_01 text-overflow">服务描述</label>
                  <span class="text-overflow text_01">{{item.modl_type_desc?item.modl_type_desc:'--'}}</span>
                </li>
                <li>
                  <label class="text_01 text-overflow">创建时间</label>
                  <span class="text-overflow text_01"
                    :title="item.create_time">{{item.create_time?item.create_time:'--'}}</span>
                </li>
              </ul>
            </div>
          </YsCol>
        </YsRow>

        <div class="page" style="padding:16px 0 0 0">
          <div class="records text_01">
            共{{modalInfo.total }}条
          </div>
          <YsPage @on-change="pageModalChange" :page-size="modalInfo.limit_recd" :current="modalInfo.current"
            :total="modalInfo.total" class="pagePallion"></YsPage>
        </div>
      </div>

      <div style="padding: 0 24px 16px">
        <YsRow class="foot-btn">
          <YsButton size="large" @click="getCancelClick">取消</YsButton>
          <YsButton size="large" @click="getModelClick" type="primary">确定</YsButton>
        </YsRow>
      </div>
    </pro-dialog>
  </div>
</template>

<script>
import { createLogger, mapActions, mapGetters } from "vuex";
import { ys_utils } from 'ys-utils-js';
export default {
  name: "Home",

  data() {
    return {
      circleWidth: 120,
      errorGoodsImg: require("../../assets/images/default.png"),
      selectlist: [
        { id: 0, name: "全部状态" },
        { id: 1, name: "已上架" },
        { id: 2, name: "未上架" },
        { id: 3, name: "审批中" },
      ],
      isSpinShow: false,
      pege_param: {
        id: 0,
        service_name: "",
      },

      value: "",
      model1: "",
      arrCard: [],
      page: {
        pageSize: 10,
        current: 1,
        total: 0,
        // showSizer:false,
        // showElevator:false
      },
      inputFocus: false,
      //新增编辑标识符
      setappflag: 0,
      //弹窗信息
      appInfo: {
        app_name: "",
        app_logo: "",
        check_model_id: "",
        check_model_name: "",
        check_model_version: "",
        app_intro: "",
      },
      app_rule: {
        app_name: [
          { required: true, message: "应用名称不能为空", trigger: "blur" },
        ],
        check_model_name: [
          { required: true, message: "检测模型不能为空", trigger: "change" },
        ],
        app_logo: [
          { required: true, message: "应用图标不能为空", trigger: "blur" },
        ],
      },
      fileupload: {
        type: null, //类型
        uploadpath: "", //路径
        upload_name: "", //名字
        upload_path: "",
      },

      //商品状态
      isShowTip: false,
      //上架弹框内容
      popTipItem: "",

      selected: "",
      total: 0,
      modelList: [], //弹窗中模型类型
      modalInfo: {
        loading_show: false,
        token: "zs-1609586169",
        model_name: null,
        project_id: "0000017057",
        limit_recd: 8,
        current: 1,
        start_recd: 0,
        model_type: 11,
      },
    };
  },
  computed: {
    ...mapGetters(["getCommData"]),
    btn_power: function () {
      //通过方法访问
      return this.$store.state.Demo.btnPower;
    },
  },
  created() {
    let _this = this;
    this.selectAppMenu();
    document.body.onclick = function (e) {
      if (e.preventDefault) {
        _this.arrCard.map((item, index) => {
          item.visible = false;
        });
        // e.preventDefault();
      }
    };
  },

  methods: {
    ...mapActions([
      "getApplicationItem",
      "setTempUploadDir",
      "addApplicationItem",
      "uploadDownloadAPP",
      "editAppItem",
      "deleteAppItem",
      "getPageAppModel",
    ]),
    onErrorImg() {
      return ("this.οnerrοr=null;this.src=" + '"' + require("../../assets/images/default-01.png") + '";');
    },
    //确认筛选
    selectAppMenu() {
      let { ent_no } = this.getCommData;
      const data = {
        ent_no,
        query_state: this.pege_param.id == 0 ? "" : this.pege_param.id,
        query_keyword: this.pege_param.service_name,
        start_recd: this.page.current,
        limit_recd: this.page.pageSize,
      };
      this.isSpinShow = true
      this.getApplicationItem(data).then((res) => {
        this.isSpinShow = false
        this.page.total = res.data.all_recd;
        if (res.data.appBeans) {
          this.arrCard = res.data.appBeans.map((item, index) => {
            return Object.assign(item, { visible: false });
          });
        }

      });
    },
    //切换分页
    pageChange(num) {
      this.page.current = num;
      this.selectAppMenu();
    },
    pageModalChange(page) {
      this.modalInfo.current = page;
      this.modalInfo.start_recd = (page - 1) * this.modalInfo.limit_recd;
      this.getPageAppModels();
    },
    //订阅
    subscribe() {
      this.$router.push({
        name: "subscribeList",
      });
    },

    //新增编辑弹窗的显示
    showAppItemDialog(flag, item) {
      this.$refs.formAppValidate.resetFields()
      this.setappflag = flag;
      //新增 1 编辑 0  默认 0
      if (flag) {
        this.appInfo = this.$options.data().appInfo;
        this.$refs.upload.clearFiles();
      } else {
        this.appInfo = item;
      }

      this.$refs.addAppDom.show();
    },
    //应用新增编辑提交
    addAlgorithmApp(name) {
      let _this = this;
      _this.$refs[name].validate(async (valid) => {
        if (!_this.appInfo.app_logo)
          return _this.$YsMessage.error("图片不能为空");

        if (valid) {
          //判断是新增还是编辑
          if (this.setappflag) {
            this.addAppItem();
          } else {
            this.editorAppItem();
          }
        }
      });
    },
    //新增应用的方法
    addAppItem() {
      let _this = this;
      _this.addApplicationItem({ appInfo: _this.appInfo }).then((res) => {
        let { data, msg, scode, status } = res;
        if (status === "ok") {
          _this.$YsMessage.success("新增成功");
          _this.selectAppMenu();
          _this.$refs.addAppDom.close();
        } else {
          _this.$YsMessage.error(msg);

        }
      })
        .catch((err) => {
          _this.$YsMessage.error(err);
        });
    },
    //编辑应用的方法
    editorAppItem() {
      let _this = this;
      _this.editAppItem({ appInfo: _this.appInfo }).then((res) => {
        let { data, msg, scode, status } = res;
        if (status === "ok") {
          _this.$YsMessage.success("编辑成功");
          _this.selectAppMenu();
          _this.$refs.addAppDom.close();
        } else {
          _this.$YsMessage.error(msg);

        }
      })
        .catch((err) => {
          _this.$YsMessage.error(err);
        });
    },
    //上传图片
    async uploadProcessThen(res, file) {
      this.fileupload.type = res.type; //上传类型
      this.fileupload.upload_name = res.name;
      let imgFolder = await this.setUpload();
      this.fileupload.upload_path = imgFolder.upload_path;
      this.fileupload.uploadpath = `${window.GlobalConfig.serviceProxy.BaseUrl}fileupload?uploadPath=${imgFolder.upload_path}`;
      this.$refs.upload.clearFiles();
    },
    //手动打开页面
    async setUpload() {
      let _this = this;
      return new Promise((resolve, reject) => {
        _this.setTempUploadDir().then((res) => {
          let { data, msg, scode, status } = res;
          if (data.upload_absolute_path && data.upload_path) {
            resolve(data);
          } else {
            reject(null);
          }
        });
      });
    },
    //上传文件成功
    handleSuccess(data, item) {
      this.appInfo.app_logo = `webDownLoad/${this.fileupload.upload_path}/${this.fileupload.upload_name}`;
    },

    //格式
    handleFormatError(file) {
      this.$YsMessage.warning({
        duration: 4,
        closable: true,
        content:
          "文件 " + file.name + " 格式不正确，请上传 jpg 或 png 格式的图片。",
      });
    },
    //大小
    handleMaxSize(file) {
      this.$YsMessage.warning({
        duration: 4,
        closable: true,
        content: "文件 " + file.name + " 太大，不能超过 2M。",
      });
    },

    //取消
    handleAppReset() {
      this.appInfo = this.$options.data().appInfo;
      this.$refs.addAppDom.close();
    },
    //获取模型
    getTextModel(item) { },
    //判断是否已上架
    showPopTipItem(state, flag) {
      this.arrCard.map((item, index) => {
        item.visible = false;
      });
      state.visible = flag;
    },
    //商品上架
    uploadDownApp(id, state) {
      let _this = this;
      const appInfo = { id, state };
      this.uploadDownloadAPP({ appInfo: appInfo })
        .then((res) => {
          let { data, msg, scode, status } = res;
          if (status === "ok") {
            if (state == 1) {
              _this.$YsMessage.success("上架成功");
            } else {
              _this.$YsMessage.success("下架成功");
            }
            this.selectAppMenu();
          } else {
            _this.$YsMessage.error(msg);
          }
        })
        .catch((err) => {
          if (state == 1) {
            _this.$YsMessage.error("上架失败");
          } else {
            _this.$YsMessage.error("下架失败");
          }
        });
    },
    //商品删除
    delAppItem(id) {
      let _this = this;
      this.$YsModal.confirm({
        title: "删除",
        content: "<p>确认是否删除！</p>",
        onOk: () => {
          const params = { appInfo: { id } };
          _this
            .deleteAppItem(params)
            .then((res) => {
              let { data, msg, scode, status } = res;
              if (status === "ok") {
                _this.$YsMessage.success("删除成功");
                _this.selectAppMenu();
              } else {
                _this.$YsMessage.error(msg);

              }
            })
            .catch((err) => {
              _this.$YsMessage.error("删除失败");
            });
        },
      });
    },

    //跳转app使用
    goAppUsage(item) {
      if (item.state == 1) {
        ys_utils.setSessionStorage('CurItemInfo', JSON.stringify(item));
        this.$router.push({ name: "appUsageList", query: item });
      } else {
        return this.$YsMessage.warning("应用未上架");
      }
    },
    //获取应用模型类型
    getPageAppModels() {
      let _this = this;
      _this.modalInfo.loading_show = true;
      _this.modelList = []
      _this.getPageAppModel(_this.modalInfo).then((res) => {
        let { data, msg, scode, status } = res;
        _this.modalInfo.loading_show = false;
        if (status === "ok") {
          this.modalInfo.total = data.all_recd;
          this.modelList = data.models.map((v) => {
            return Object.assign(v, { checked: false });
          });
        } else {
          _this.modalInfo.loading_show = false;
          _this.$YsMessage.error(msg);
        }
      });
    },
    //打开模型框
    getmodalBox() {
      this.getPageAppModels();
      this.$refs.modalDom.show();
    },
    //设置选中按钮
    setModalRadio(item) {
      if (item.checked) {
        item.checked = false;
      } else {
        this.modelList.map((v) => {
          v.checked = false;
        });
        item.checked = true;
      }
    },
    //获取选中的模型
    getModelClick() {
      if (this.modelList.some((target) => target.checked)) {
        let check_obj = this.modelList.find((item) => item.checked);
        this.appInfo.check_model_id = check_obj.model_no;
        this.appInfo.check_model_name = check_obj.model_name;
        this.appInfo.check_model_version = check_obj.batch_no || "0000017023";
        this.$refs.modalDom.close();
      } else {
        this.$YsMessage.info("请选择模型");
      }
    },
    //取消
    getCancelClick() {
      this.$refs.modalDom.close();
    },
    //获取路径
    imgurl(path) {
      return `${window.GlobalConfig.serviceProxy.BaseUrl}` + path;
    },
    //
    stopClick(state) { },
    //获取焦点失去焦点
    clickBlur(flag) {
      this.inputFocus = flag
    }
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        let screenWidth = document.body.clientWidth;
        if (screenWidth < 1920) {
          this.circleWidth = 120
        }
        if (screenWidth < 1600) {
          this.circleWidth = 110
        }
        if (screenWidth < 1366) {
          this.circleWidth = 100
        }
      })();
    };
  }
};
</script>
<style lang="less" scoped>
.content {
  width: 100%;
  height: calc(100% - 19px);
  min-width: 730px;
  border: 1px solid transparent;
  border-radius: 2px;

  // padding: 16px 16px 0;
  /deep/ .textNtro {
    textarea {
      resize: none;
      font-size: 16px;
      height: 120px;

      &::placeholder {
        line-height: 34px;
      }
    }
  }

  .iconsouter {
    width: 100%;
    height: 315px;
    border-radius: 4px;
    border: 1px solid #cfd7e5;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .iconsinner {
    width: 100%;
    width: 100%;
    color: rgba(64, 86, 128, 1);

    p {
      color: rgba(64, 86, 128, 1);
      margin-top: 16px;
    }
  }

  .search {
    display: flex;
    align-items: center;
    height: 72px;
    overflow: hidden;
    padding: 16px;
    margin-bottom: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;

    .search-input {
      height: 40px;
      width: 317px;

      margin-right: 16px;
      border-radius: 4px;

      input {
        border: 1px solid #ccc;
      }
    }

    .search-btn {
      margin-left: auto;
    }
  }

  .bg-box-novalue {
    height: 14px;
  }

  //下图
  .service {
    // margin-bottom: 10px;
    height: calc(100% - 80px);
    overflow: auto;
    width: 100%;
    padding: 16px 16px 0;
    border: 1px solid #cfd7e5;
    border-radius: 4px;

    .service-inner {
      height: calc(100% - 54px);
    }

    .default-box {
      width: 250px;
      // height: 290px;
      position: relative;
      left: 50%;
      top: 50%;
      margin: -125px 0 0 -130px;

      p {
        margin-top: 10px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 14px;
        color: #333333;
      }

      .default-img {
        width: 250px;
        height: 260px;
      }
    }

    .service-item {
      position: relative;
      float: left;
      overflow: hidden;
      width: calc(calc(100% / 5) - 13px);
      height: 405px;
      max-width: 500px;
      margin: 0px 16px 16px 0;
      border: 1px solid #cfd7e5;
      box-shadow: none;

      /deep/ .ivu-card-body {
        padding: 0;
      }

      &:nth-of-type(5n) {
        margin-right: 0;
      }

      .check-box {
        position: absolute;
        right: 0;
        margin: 0;
      }

      .cardState {
        position: absolute;
        top: 16px;
        left: 16px;
        width: 68px;
        height: 28px;
        line-height: 28px;
        z-index: 30;
        text-align: center;
        color: #fff;
        font-size: 16px;
        border-radius: 2px;
      }

      .upper {
        background: #0091ff;
      }

      .unUpper {
        background: #e77930;
      }

      .wait {
        background: blue;
      }

      .setting {
        position: absolute;
        bottom: 14px;
        right: 10px;
        color: #405680;
        opacity: 0.6;
        cursor: pointer;
      }

      .popTip {
        display: flex;
        align-items: center;

        .tipButton {
          display: block;
          margin-left: auto;
        }
      }

      .service-footer {
        width: 100%;
        height: 53px;
        background: #f5f7fa;
        opacity: 1;
        position: absolute;
        bottom: -53px;
        left: 0;
        border-radius: 0px 0px 4px 4px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 24px;
        padding: 0 16px;
        transition: all 0.4s;

        i {
          cursor: pointer;
          color: #405680;
        }
      }

      &:hover .service-footer {
        bottom: 0px;
      }

      &:first-child {
        margin-left: 0;
      }

      &:nth-child(6) {
        margin-left: 0;
      }

      .img-top {
        height: 225px;
        position: relative;
        overflow: hidden;
        border-bottom: 1px solid #cfd7e5;

        .service-img {
          position: relative;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          transition: all 1.5s;
          display: block;

          &:after {
            content: "";
            display: inline-block;
            position: absolute;
            z-index: 2;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url("../../assets//images/default.png") no-repeat;
            background-size: 100% 100%;
            background-color: #fff;
          }
        }
      }

      .service-list {
        padding-top: 16px;

        li {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 34px;
          display: flex;

          label {
            width: 30%;
            margin-left: 20px;

            opacity: 0.6;
          }

          span {
            width: 60%;
            font-weight: 500;
          }
        }
      }

      .toolTip {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 999;
        background: rgba(0, 0, 0, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;

        .toolTipItem {
          margin: 10% 0;
        }

        button {
          display: block;
          width: 120px;
          height: 40px;
          background: rgba(255, 255, 255, 1);
          border: 1px solid #0061ff;
          color: #0061ff;
          opacity: 1;
          border-radius: 4px;

          &:hover {
            background: #0061ff;
            color: #fff;
          }
        }

        .active-bg {
          background: #0061ff;
          color: #fff;
        }
      }
    }
  }

  .right {
    margin-left: auto;

    .right-between {
      margin-left: 10px;
      width: 80px;
      min-width: 80px;
      height: 40px;
    }
  }

  .model-box {
    padding: 10px 24px 24px;

    /deep/ .label_before {
      label {
        &:before {
          content: "*";
          display: inline-block;
          margin-right: 4px;
          line-height: 1;
          font-family: SimSun;
          font-size: 14px;
          color: #d53939;
        }
      }
    }

    .icon-chain {
      width: 48px;
      height: 48px;
      line-height: 48px;
      text-align: center;
      margin: 26px auto 0;
      position: relative;
      margin-left: -2px;
      z-index: 999;
      // margin-left: 0;

      background: rgba(0, 97, 255, 0.1);
      border: 1px solid #0061ff;
      opacity: 1;
      border-radius: 4px;

      .icon {
        font-size: 40px;
        color: #0061ff;
        cursor: pointer;
      }
    }

    .formconter {
      padding: 0 16px;

      /deep/.ivu-form-item {
        width: 100%;
      }
    }
  }
}

.page {
  display: flex;
  align-items: center;
  padding: 10px 0 0 0;
  width: 100%;

  .records {
    font-size: 16px;
  }

  .pagePallion {
    margin-left: auto;
  }
}

@media screen and (max-width: 1600px) {
  .content {
    .service {
      .service-item {
        width: calc(calc(100% / 4) - 12px);

        &:nth-of-type(4n) {
          margin-right: 0;
        }

        &:nth-child(5) {
          margin-right: 16px;
        }

        &:nth-of-type(n + 5) {
          margin-bottom: 16px;
        }
      }
    }
  }
}

@media screen and (max-width: 1366px) {
  .content {
    .service {
      .service-item {
        width: calc(calc(100% / 3) - 11px);

        &:nth-of-type(3n) {
          margin-right: 0;
        }

        &:nth-of-type(4n) {
          margin-right: 16px;
        }

        &:nth-child(5) {
          margin-right: 16px;
        }

        &:nth-of-type(n + 5) {
          margin-bottom: 16px;
        }
      }
    }
  }
}

.modal-box {
  .contantmodal {
    .contant-scrollb {
      height: 450px;
      overflow: auto;
    }

    border: 1px solid #cfd7e5;
    margin: 16px 24px;
    padding: 16px 16px;
    border-radius: 4px;
  }

  /deep/.ivu-modal {
    width: 70%;
    min-width: 900px;
    top: 10%;
  }

  .modal-item {
    width: 100%;
    border-radius: 4px;
    border: 1px solid #cfd7e5;
    margin-bottom: 16px;

    .mi-header {
      width: 100%;
      height: 48px;
      line-height: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      border-radius: 4px 4px 0px 0px;
      // background: #f5f7fa;
      color: rgba(64, 86, 128, 1);
      font-size: 18px;

      .mih-radio {
        width: 16px;
        height: 16px;
        border: 1px solid #405680;
        opacity: 1;
        border-radius: 9px;
      }

      .mih-radio-active {
        border: 6px solid rgba(0, 97, 255, 1);
      }
    }

    .mi-center {
      height: 197px;
      display: flex;

      .mic-left {
        width: 60%;
        display: flex;
        justify-content: center;
        align-items: center;

        .demo-Circle-top {
          font-size: 24px;
        }

        .demo-Circle-bottom {
          font-size: 14px;
          margin-top: 4px;
        }
      }

      .mic-right {
        width: 40%;

        .micr-list {
          li {
            label {
              display: block;
              font-size: 16px;
              width: 100%;
              color: rgba(64, 86, 128, 0.6);
            }

            .micr-text {
              font-size: 24px;
              color: rgba(64, 86, 128, 1);
              font-weight: bold;
            }
          }
        }
      }
    }

    .mi-footer {
      border-top: 1px solid #e1e6f0;
      height: 85px;
      padding-top: 8px;

      li {
        line-height: 36px;
        height: 50%;
        padding: 0 16px 0;
        font-size: 16px;

        // display: flex;
        label {
          width: 30%;
          color: rgba(64, 86, 128, 0.6);
          float: left;
        }

        span {
          width: 70%;
          color: rgba(64, 86, 128, 1);
          float: left;
        }
      }
    }
  }
}

/deep/ .ivu-select-arrow {
  font-size: 24px !important;
}

/deep/ .icon-input {
  .ivu-input[disabled] {
    color: rgba(64, 86, 128, 1) !important;
  }

  .ivu-input {
    border-radius: 4px 0 0 4px;
  }
}

.searchBtn {
  width: 80px;
  min-width: 80px;
  height: 40px;
  font-family: PingFang SC;
}

/deep/.ivu-modal-header {
  padding: 18px 24px !important;
}

/deep/.ivu-modal-close {
  right: 14px !important;
}

/deep/.ivu-btn-large {
  min-width: 98px !important;
}
</style>
